<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
 
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
    

    <main class=" w-full">
      <div class="sm:flex sm:items-center sm:justify-between">
      <div class="card     side text-gray-300">
        <div class="flex-row items-center space-x-4 card-body">
          <div>
             <div   class="avatar" v-if="user.picture"><div class="rounded-full w-16 h-16 shadow ring ring-gray-700 " ><img id="user_picture" :src="user.picture"></div></div>
              <div  class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-16 h-16" :style="'background-color:'+ user['icon:bgColor']"><span>{{user['icon:text']}}</span></div></div> 
              </div> <div><h2 class="card-title mb-0">{{user.username}}</h2> <p class="">{{user.aboutme}}</p>
            
          </div>
        </div>
       
      </div>
      <div v-if="isFollowing" @click="unfollow" class="badge cursor-pointer badge-lg bg-gray-400 p-5 rounded-sm  w-full sm:w-auto"> Subscribe</div>
       <div v-else @click="follow" class="badge cursor-pointer badge-lg bg-red-800 p-5 rounded-sm  w-full sm:w-auto"> Subscribe</div>
    </div>

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
        
        <div class=" ">
          

          <!-- topics grid -->
           
            <div class="menu-box mb-4">
              <ul class="w-full menu items-stretch px-3 shadow-lg  horizontal rounded-box bg-gray-800 text-gray-300">
                <li class="bordered">
                  <a>
                      Topics  
                      </a>
                </li> 
                
                <li>
                  <a :href="'/user/'+user.uid+'/followers'">
                        followers
                      </a>
                </li> 
                <li>
                  <a  :href="'/user/'+user.uid+'/following'"  >
                        following
                      </a>
                </li> 
                 
                
              </ul>
            </div>
            <!-- Replace with your content -->
            <div v-for="(topicBlock,k) in list" v-bind:key="k" :id="'category_'+topicBlock.score">
              <div class=" text-gray-300 px-3 mt-3 relative">
                  <div class=" float-left"><h2 class=" text-xl category_name"> {{topicBlock.value}}</h2></div>
                  <a :href="'/user/'+user.uid+'/cid/'+topicBlock.score" class="float-right">More></a>
                  
                  <div  class="float-right inline-block relative mr-6 cursor-pointer" v-if="topicBlock.value!=='Other Topic'">
                     <label>Setting  <input class="button_for_menuitem hidden" type="checkbox">
                              <div role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" class="origin-top-right absolute right-0 mt-2 w-48 z-50  rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden">
                                <label  for="my-modal-2"  v-if="user.uid==$store.state.user.uid"   role="menuitem" tabindex="-1"  class="block px-4 py-2  cursor-pointer text-gray-700"  @click="editC(topicBlock.value,topicBlock.score)" >Edit</label> 
                                <a  v-if="user.uid==$store.state.user.uid"   role="menuitem" tabindex="-1"  class="block px-4 py-2  cursor-pointer text-gray-700"  :data-name="topicBlock.value"  @click="deleteC($event)" > Delete</a> 
                              </div>
                              </label>
                  </div>
                  <div class=" clear-both"></div>

            </div>
          
               <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10 " v-if="topicBlock.list && topicBlock.list.length>0">
          <!-- Filters -->
          <!-- topics grid -->
          <div class="lg:col-span-4">
             
            <!-- Replace with your content -->
            <div  class="grid grid-cols-1 gap-4  m-4  sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
                <a  class="h-98 text-gray-300" v-for="(item,key) in topicBlock.list"  v-bind:key="key"  :href="'/topic/'+item.slug" >
      
        <div  class="card bg-gray-700 topic-item">
      <figure class="h-40" >
        <img  class="object-cover h-40 w-full" :src="item.cover" >
      </figure> 
      <div class="card-body p-2">
        <h2 class=" text-gray-200 line-2 h-12" v-html="item.title"></h2>  
       <div class="truncate mt-2"  v-if="item.tags && item.tags.length>0">
            <a  class="btn btn-outline btn-xs text-gray-400 mx-1" v-for="(tag,key) in item.tags" v-bind:key="key"  :href="'/tags/'+tag">{{tag}}</a> 
        </div>
         <div class="p-2 text-gray-400"> 
            <span class="float-left">{{item.timestamp}}</span>
            <div class="float-right">
            <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.viewcount}}</span>
            <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
            <span class="inline-block">{{item.upvotes}}</span>
            </div>
            <div class="clear-both"></div>

         </div>
       </div>
    </div> 
                </a>
            </div>
             <!-- recommend topics grid -->
           
            <!-- /End replace -->
          </div>
               </div>
               <div class=" text-center text-gray-500 pt-9" v-else>No Topics</div>
 </div>
            <!-- /End replace -->
           
          <!-- recommend topics grid -->
         
        </div>
      </section>
    </main>
  </div>
</div>

</div>

 
<input type="checkbox" id="my-modal-2" class="modal-toggle"> 
<div class="modal">
  <div class="modal-box">
      <div class="form-control">
            <label class="label">
                <span class="label-text">Title (required)</span>
            </label> 
            <input type="text" v-model="category_name" placeholder="Edit title" class="input input-bordered">
            </div>
    <div class="modal-action">
      <label   @click="sendEdit" class="btn btn-primary">Submit</label> 
      <label for="my-modal-2" class="btn">Close</label>
    </div>
  </div>
</div>


</div>
</template>


<script>

export default {
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
   head() {
    return {
      title: this.meta.title,
      meta: [
         {
          name: 'keywords',
          content: this.meta.keywords,
        },
        {
          name: 'description',
          content:this.meta.description
        }
      ]
      }
    },
 
  name: 'IndexPage',
   data(){
    return { 
      isFollowing:false,
      showNothing:false,
      page:2,
      list:[],
      slideTpye:'small',
      user:{},
      pl:"pl-0" ,
      category_name:"",

    }
  },
   async asyncData({req, params,$Data,error,$axios,route}) {
      
      let sid = req.sid;
      let sesData = await $Data.sesData(sid)
      let isFollowing =false;
      let uid = params.id;
      if(sesData.uid){
         isFollowing = await $Data.isFollowing(uid,sesData.sesUid);
      }
      let res = await $Data.getUser(uid);
      if(res.code>0){
        error({
            'statusCode': res.code,
            'message':res.code==404?"Page Not Found": JSON.stringify( res.msg),
        })
        return
      }
      let user = res.data;
      let topicList = await $Data.userIndexTopic(uid,1);
      let meta = await $Data.getMeta(route.path,{subtitle:user.username});
      let topics =[];
      if(topicList && topicList.length>0){
         topics = topicList;
      }
     
      return { 
        user:user,
        isFollowing,
        list: topics,
        meta
      }
   },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
   },
  methods: {
    async deleteC(event){
      if(!confirm("Are you sure you want to purge this category ?")){
         return;
       }
        var el = event.currentTarget;
       var category_name = $(el).attr("data-name"); 
       let params ={
          category_name:category_name
       }
      let res = await  this.$axios.post("snogogo_nuxt/api/topic/user/delCid",params);
      if(res.code>0){
        this.$tools.alert("error", res.msg);
        return;
      }
      this.$tools.alert("success", res.msg);
      // window.location.reload();
      $("#category_"+category_id).remove();
    },
     editC(category_name,cid){
        this.category_name = category_name;
        this.old_category_name = category_name;
        this.cid = cid;

    },

     async sendEdit(){
        // this.category_name = category_name;
        let category_id = this.cid;
        let params ={
          old_category_name:  this.old_category_name,
          category_name:this.category_name
       }
      let res = await  this.$axios.post("snogogo_nuxt/api/topic/user/editCid",params);
      if(res.code>0){
        this.$tools.alert("error", res.msg);
        return;
      }
      this.$tools.alert("success", res.msg);
      $("#category_"+category_id).find(".category_name").text(this.category_name);
      document.getElementById("my-modal-2").checked = false;
      

    },
    async getList(){
       //this.$tools.showToast('Loading...', 10000)
      let res = await  this.$axios.post('snogogo_nuxt/api/topic/userIndex',{page:this.page})
      //this.$tools.hideToast();
      if(res.code>0){
           var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
           this.$tools.alert("error",message);
           return;
      }
       this.page++;
      if(res.data && res.data.length>0){
          this.list = this.list.concat(res.data)
      }
      if(this.list.length==0){
        this.showNothing=true;
      }
     
      
       
    },

    async unfollow(){
        var d = confirm("Unsubscribe from "+this.user.username+"?");
        if(!d){
          return;
        }
        //this.$tools.showToast('Loading...', 10000)
        // https://community.nodebb.org/api/v3/users/{uid}/follow
        let res = await  this.$axios.post('snogogo_nuxt/user/unfollow',{uid:this.user.uid})
        
        //this.$tools.hideToast();
        if(res.code>0){
            var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
            this.$tools.alert("error",message);
            return;
        }
        this.isFollowing = false;
        
    },
    async follow(){
        
        //this.$tools.showToast('Loading...', 10000)
        // https://community.nodebb.org/api/v3/users/{uid}/follow
        let res = await  this.$axios.post('snogogo_nuxt/user/follow',{uid:this.user.uid})
        
        //this.$tools.hideToast();
        if(res.code>0){
            var  message=res.code==404?"Page Not Found": JSON.stringify( res.msg);
            this.$tools.alert("error",message);
            return;
        }
        this.isFollowing = true;
        
    },
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0";
        }
     }
   }
   
 
     

}
</script>
